// 提供复用逻辑的函数（钩子）
import { useIntersectionObserver } from "@vueuse/core"
import { ref } from "vue"

/**
 * 数据懒加载
 * @param {Function} apiFn  -API函数
 */
export const uselazyData = (apiFn) => {
    const target = ref(null)
    const result = ref([]);
    // stop 是停止观察是否进入或移出可视区域的行为    
    const { stop } = useIntersectionObserver(
            target, // 监听目标dom容器，而且是vue3.0方式绑定的dom对象
            ([{ isIntersecting }], observerElement) => {
                // isIntersecting 是否进入可视区域，true是进入 false是移出
                // observerElement 被观察的dom
                if (isIntersecting) {
                    console.log('进入可视区');
                    stop(); // 停止观察
                    // 调用API函数获取数据
                    apiFn().then(data => {
                        result.value = data.result
                    })
                }
                // 产品区域需要滚动比较多才能去加载数据。
            }, {
                threshold: 0
            }
        )
        // 返回-->数据（dom，后台数据）
    return { target, result }
}